<template>
	<view class="page">
		<u-navbar :title="title" safeAreaInsetTop fixed placeholder>
			<view class="coreshop-navbar-left-slot" slot="left">
				<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
				<u-icon name="home" size="22" @click="goHome"></u-icon>
			</view>
			<view slot="right">
			</view>
		</u-navbar>

		<view class="header-card">
			<view class="header">
				<view class="lf">{{headerInfo.GZJH}}</view>
				<div class="rg-tag">{{infoTypes[headerInfo.JHLX]}}</div>
			</view>
			<view class="info">
				<u-avatar size="24" font-size="15" :text="headerInfo.AddAccName.slice(0,1)" bg-color="#3c9cff"
					color="#fff"></u-avatar>
				<view class="name">{{headerInfo.AddAccName}}</view>
				<view class="time">{{ '最新修改时间' + $common.dateFormat(headerInfo.ChgTime, 'ymd-hms') }}</view>
			</view>
			<button class="header-footer-btn" v-if="planType == 3 && ['2','3','4'].includes(headerInfo.JHLX)"
				@click="handleAddEstimatePlan">
				添加我的预估计划
			</button>
		</view>

		<!-- 事项列表 -->
		<view class="card-list" v-if="planListLen">
			<view v-for="(item,index) in planList" class="card" :key="index">
				<template v-if="planType != 3 && item.RowID">
					<view class="header-times">计划时间:
						{{ $common.dateFormat(headerInfo.Date) + '~' + $common.dateFormat(headerInfo.EndDate) }}
					</view>
					<view class="title">{{item.JHFL}} </view>
					<view class="msg-detail-list">
						<view class="msg-detail-item" v-for="(planDtaItem, idx) in item.jhxqitems" :key="idx">
							<view class="text-msg">{{planDtaItem.jhxqitem.JHXQ}}</view>
							<view class="icon-card" v-if="!planDtaItem.wcqk.length"
								@click="handleAccomplish(planDtaItem)">
								<u-icon name="plus-circle-fill" style="justify-content: center;" labelSize="14" bold
									size="38" color="#ff8a00"></u-icon>
								<view>完成情况</view>
							</view>
						</view>
					</view>
					<view class="count" v-if="item.Sales">
						<view class="label">计划数量: </view> {{item.Sales}}
					</view>
				</template>
				<template v-else>
					<view class="header">
						<u--input v-model="item.JHFL" :clearable="false" input-align="left" placeholder="请输入计划事项"
							placeholder-style="font-size:28rpx;color:#999">
						</u--input>
						<view class="del-box" @click="handleOrAddMatter(index)">
							<u-icon name="trash" custom-prefix="custom-icon" color="#999999" size="23">
							</u-icon>
						</view>
					</view>
					<view class="content">
						<view class="row" v-for="(infoItem, infoindex) in item.JHXQ" :key="infoindex">
							<div class="col">
								<u--textarea count maxlength="500" autoHeight class="content-ipt"
									v-model="infoItem.data" placeholder="请输入计划详情"
									placeholder-style="font-size:28rpx;color:#999">
								</u--textarea>
								<view class="add-icon" @click="handleAddDelInfo(item.JHXQ)" v-if="!infoindex">
									<u-icon name="plus" custom-prefix="custom-icon" color="#6f7175" size="18">
									</u-icon>
								</view>
								<view class="sub-icon" @click="handleAddDelInfo(item.JHXQ, infoindex)" v-else>
									<u-icon name="minus" custom-prefix="custom-icon" color="#6f7175" size="18">
									</u-icon>
								</view>
							</div>
							<view class="footer">
								<template v-for="(footerItem, footerIndex) in cardFooterTabs">
									<view :key="footerItem" class="footer-item"
										@click="handleFooterClick(footerItem, index, infoindex)">
										{{footerItem}}
									</view>
								</template>
							</view>
						</view>
						<view class="rowTwo">
							<view class="select-type" @click="handleMatterTypeClick(index)">
								<view :style="{color: item.JHSLLX? '#000' : ''}" style="margin-right: 10px;">
									{{item.JHSLLX? item.JHSLLX : '计划类型' }}
								</view>
								<u-icon :name="arrowName" custom-prefix="custom-icon" color="#6f7175" size="18">
								</u-icon>
							</view>
							<u--input class="content-ipt" v-model="item.Sales" :clearable="false" type="number"
								input-align="left" placeholder="请输入计划数量" style="border:none;"
								placeholder-style="font-size:28rpx;color:#999">
							</u--input>
						</view>
					</view>
					<!-- <view class="footer">
						<template v-for="(footerItem, footerIndex) in cardFooterTabs">
							<view :key="footerItem" class="footer-item" @click="handleFooterClick(footerItem, index)">
								{{footerItem}}
							</view>
						</template>
					</view> -->
					<view class="footer-tip">
						<u-icon v-if="item.CompletionTime" name="clock-fill" custom-prefix="custom-icon" color="#FF8A00"
							size="14">
						</u-icon>
						<view style="margin-right: 8rpx;">{{ $common.longDateFormate(item.CompletionTime, 'ymd-hms') }}
						</view>
						<u-icon v-if="item.GLKH" name="man-add-fill" custom-prefix="custom-icon" color="#FF8A00"
							size="14">
						</u-icon>
						<template v-if="item.GLKH">
							<view v-for="glkhItem in item.GLKH ? item.GLKH : [] " :key="glkhItem.id">
								{{glkhItem.name + ','}}
							</view>
						</template>
						<u-icon v-if="item.GLR" name="account-fill" custom-prefix="custom-icon" color="#FF8A00"
							size="14">
						</u-icon>
						<template v-if="item.GLR">
							<view v-for="glrItem in item.GLR ? item.GLR : []" :key="glrItem.id">{{glrItem.name + ','}}
							</view>
						</template>
					</view>
					<button class="footer-publish" @click="handleEnterPublish" v-if="planType != 3 && index > 0 ">
						确认发布
					</button>
				</template>
			</view>
		</view>

		<!-- 添加事项 -->
		<button class="add-btn" @click="($event) => handleOrAddMatter()">
			<u-icon name="plus" bold custom-prefix="custom-icon" color="#157EFB" size="16">
			</u-icon>
			添加事项
		</button>


		<!-- 关联客户弹窗 -->
		<u-popup :show="showClient" mode="bottom" customStyle="height: 80%" :overlay="false">
			<view class="popup">
				<selectCorrelation v-if="showClient" @hideSubClientPop="handleBack"
					@updateSubClient="handleUpdateClient" />
			</view>
		</u-popup>
		<u-popup :show="showPersonnel" mode="bottom" customStyle="height: 80%" :overlay="false">
			<view class="popup">
				<associatedPersonnel v-if="showPersonnel" @hideSelectPop="handleBack"
					@selectCorrelationSure="handleCorrelationSure" />
			</view>
		</u-popup>

		<!-- 评论列表 -->
		<view class="comment-card-list" v-if="planType != 3 && x_clientList.length">
			<view class="common-head">
				{{`评论 (${x_clientList.length})`}}
			</view>
			<view class="comments">
				<view class="comment-item" v-for="item in x_clientList" :key="item.ID">
					<u-avatar size="24" font-size="15" :text="item.AddAccName.slice(0,1)" bg-color="#3c9cff"
						color="#fff"></u-avatar>
					<view class="right">
						<view class="detail">
							<view class="name">{{item.AddAccName}}</view>
							<view class="time">{{ $common.dateFormat(item.ChgTime, 'ymd-hms') }}</view>
						</view>
						<view class="msg">{{item.PL}}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 删除计划的icon / 底部评论输入框-->
		<template v-if="planType == 3">
			<view class="del-operation" @click="handleDelPlan">
				<u-icon name="trash" color="red" size="30"></u-icon>
			</view>
			<!-- 底部保存和发布的操作按钮 -->
			<view class="footer-operation-btns">
				<button class="scratch-paper-btn" @click="() => handleSaveUpdate()">保存修改</button>
				<button class="next-btn" @click="() => handleSubmit()">发布</button>
			</view>
		</template>
		<view class="comment-card" v-else>
			<u--input v-model="commentMsg" :clearable="false" input-align="left" placeholder="写评论..."
				placeholder-style="font-size:28rpx;color:#999">
			</u--input>
			<img style="width: 18px;height: 18px;" src="/static/images/plan/comment.png" @click="handleSendMsg" alt=""
				srcset="" />
		</view>

		<!-- 完成时间 -->
		<u-datetime-picker ref="scuessPicker" :show="showScuessPicker" v-model="timeValue" mode="datetime"
			:formatter="scuessformatter" @confirm="onScuessConfirm($event)"
			@cancel="showScuessPicker = false"></u-datetime-picker>

		<!-- 计划事项中计划类型 -->
		<u-picker cancelText="清空" :show="showMaterType" :columns="[['数量', '金额']]" @confirm="onMaterTypeConfirm"
			@cancel="handleMaterTypeCancel"></u-picker>

		<!-- 完成情况说明 -->
		<explainbox v-if="showExplainPop" @cancelExplain="cancelExplain" @explainSure="explainSure" :userData="userData"
			:editExplainInfo="editExplainInfo"></explainbox>
	</view>
</template>

<script>
	import selectCorrelation from "@/packagePlan/components/selectCorrelation.vue"
	import associatedPersonnel from "@/packagePlan/components/associatedPersonnel.vue"
	import explainbox from "@/packagePlan/components/explain.vue"
	export default {
		components: {
			selectCorrelation,
			associatedPersonnel,
			explainbox
		},
		data() {
			return {
				title: '', // 自定义导航栏标题
				cardFooterTabs: ['关联客户', '关联人员', '完成时间'],
				planType: 1, // 发布、收到、草稿箱 /类型
				showClient: false, // 关联客户
				showPersonnel: false, // 关联人员
				showScuessPicker: false, // 完成时间组件框
				showExplainPop: false, // 完成情况说明模态框
				showMaterType: false, // 计划事项中计划类型
				arrowName: 'arrow-down', // arrow-up向上/arrow-down向下 icon
				oldLen: 0,
				headerInfo: { // 头部card 的数据
					AddAcc: "15557167200",
					AddAccName: "林海广",
					AddIP: "122.234.5.184",
					AddTime: "2024-09-12T08:55:18.297",
					ChgAcc: "15557167200",
					ChgAccName: "林海广",
					ChgIP: "122.234.5.184",
					ChgTime: "2024-09-12T08:55:18.297",
					Date: "2024-09-09T00:00:00",
					Deleted: "0",
					EndDate: "2024-09-15T23:59:59",
					GZJH: "2024年第37周计划",
					GZZJ: null,
					ID: "2A6697EA91284CFA9CAF58A6C004E8B9",
					IsFB: "0",
					IsNM: null,
					IsNull: false,
					JHJD: "|2A6697EA91284CFA9CAF58A6C004E8B9",
					JHLX: "2",
					JHZT: null,
					SJJHID: "",
					YWYID: "BF19F8A6C4F8421BAFB8121A6F17EF49"
				},
				currIndex: -1,
				planList: [], // 展示计划详情的列表
				timeValue: Number(new Date()), // 当前时间的时间戳
				infoTypes: {
					1: '当天计划',
					2: '周计划',
					3: '月计划',
					4: '年计划',
					7: '上级发布计划',
					8: '会议记录计划',
					9: '备忘事项'
				},
				commentMsg: '', // 用户评论
				x_clientList: [{ // 评论列表数据
						AddAcc: "15557167200",
						AddAccName: "林海广",
						AddIP: "183.129.50.153",
						AddTime: "2024-09-19T09:39:39.457",
						ChgAcc: "15557167200",
						ChgAccName: "林海广",
						ChgIP: "183.129.50.153",
						ChgTime: "2024-09-19T09:39:39.457",
						Deleted: "0",
						ID: "D95444FB6A144DB4B99AD54A1E1BBDB4",
						IsNull: false,
						JHFLID: null,
						JHID: "956687CC94804F14B5152B04187A7F52",
						PL: "ddddd",
						PLLX: "0",
						PLR: "BF19F8A6C4F8421BAFB8121A6F17EF49",
						PLRName: "林海广"
					},
					{
						AddAcc: "15557167200",
						AddAccName: "林海广",
						AddIP: "183.129.50.153",
						AddTime: "2024-09-19T09:39:39.457",
						ChgAcc: "15557167200",
						ChgAccName: "林海广",
						ChgIP: "183.129.50.153",
						ChgTime: "2024-09-19T09:45:39.457",
						Deleted: "0",
						ID: "D95444FB6A144DB4B99AD54A1E1BBDB4",
						IsNull: false,
						JHFLID: null,
						JHID: "956687CC94804F14B5152B04187A7F52",
						PL: "dd",
						PLLX: "0",
						PLR: "BF19F8A6C4F8421BAFB8121A6F17EF49",
						PLRName: "林海广"
					}
				]
			};
		},
		onLoad(e) {
			const {
				id,
				planAuth
			} = e
			this.title = '发布计划详情'
			if (planAuth) {
				this.planType = e.planAuth;
				console.log(this.planType);
				planAuth == '2' && (this.title = '收到计划详情');
				planAuth == '3' && (this.title = '计划草稿详情');
			}
			// 通过id 获取计划详情
			console.log(e);
			// 需要将 后台返回的数据格式 转为 newPlanList 这种形式的 其中 {}中的值就是
			let newPlanList = [{
				ActualAmount: 0,
				AddAcc: "15557167200",
				AddAccName: "林海广",
				AddIP: "122.234.5.184",
				AddTime: "2024-09-12T08:55:18.33",
				ChgAcc: "15557167200",
				ChgAccName: "林海广",
				ChgIP: "122.234.5.184",
				ChgTime: "2024-09-12T08:55:18.33",
				CompletionTime: "1900-01-01T00:00:00",
				GLKH: "",
				GLKHName: "",
				GLR: "",
				GLRName: "",
				GLRType: "",
				ID: "BE6C163537954B6B8EB346D56D4EDDEB",
				IsNull: false,
				IsRead: false,
				IsTuiSong: 0,
				JHFL: "哈哈",
				JHID: "2A6697EA91284CFA9CAF58A6C004E8B9",
				JHSLLX: "数量",
				JHXQ: "来了",
				JHZT: "1",
				OldJHID: "",
				QKSM: null,
				RelationalSchemaID: null,
				RowID: 1,
				SFCF: null,
				SJXQID: "",
				Sales: 11,
				TXZQ: null,
				XCBFSJ: "0001-01-01T00:00:00",
				jhxqitems: [{
					jhxqitem: {
						ActualAmount: 0,
						AddAcc: "15557167200",
						AddAccName: "林海广",
						AddIP: "211.90.235.217",
						AddTime: "2024-04-14T22:56:32.7",
						ChgAcc: "15557167200",
						ChgAccName: "林海广",
						ChgIP: "211.90.235.217",
						ChgTime: "2024-04-14T22:56:32.7",
						CompletionTime: "1900-01-01T00:00:00",
						GLKH: "",
						GLKHName: "",
						GLR: "",
						GLRName: "",
						GLRType: "",
						ID: "8B7FCE7EAA9841BDA97CCA5A99562845",
						IsNull: false,
						JHFL: "测试地址",
						JHID: "8C03E16FEBF0404287513436576D0079",
						JHXQ: "我的计划",
						JHZT: "1",
						QKSM: null,
						RelationalSchemaID: null,
						RowID: null,
						Seq: 0,
						XCBFSJ: null,
						XQID: "DED49366E7D54C168B3FA883AC34BA37"
					},
					wcqk: []
				}],
			}]
			newPlanList.map(item => {
				Object.keys(item).forEach(key => {
					if (key === 'JHXQ') {
						console.log(item[key].split('|'));
						item['JHXQ'] = item[key].split('|').map(jhxqItem => {
							return {
								data: jhxqItem
							}
						})
					}
				})
				return item
			})
			this.oldLen = newPlanList.length
			console.log(newPlanList);
			this.planList = newPlanList
		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.scuessPicker.setFormatter(this.scuessformatter)
		},
		computed: {
			planListLen() {
				return this.planList.length
			}
		},
		methods: {
			handleOrAddMatter(index) { // 添加事项card的删除
				if (index == undefined) {
					const newAddPlanList = [...this.planList]
					newAddPlanList.push({
						JHFL: null,
						JHXQ: [{
							data: null
						}],
						JHSLLX: null,
						Sales: null
					})
					this.planList = [...newAddPlanList]
					console.log(this.planList)
					return
				}
				if (index + 1 < this.oldLen) return
				if (index <= 0) return
				// 进行逻辑判断删除
				const newDelPlanList = [...this.planList]
				newDelPlanList.splice(index, 1)
				this.planList = [...newDelPlanList]
			},
			handleAddDelInfo(infoList, index) {
				if (index == undefined) {
					infoList.push({
						data: null
					})
				} else {
					infoList.splice(index, 1)
				}
			},
			scuessformatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}

				if (type === 'hour') {
					return `${value}时`
				}

				if (type === 'minutemiao') {
					return `${value}分`
				}

				return value
			},
			handleFooterClick(item, index) { // 底部跳转到不同 关联项的弹窗中 进行关联
				this.currIndex = index
				switch (item) {
					case '关联客户':
						this.showClient = true
						break
					case '关联人员':
						this.showPersonnel = true
						break
					default:
						this.showScuessPicker = true
				}
			},
			handleBack() { // 返回
				this.showClient = false
				this.showPersonnel = false
			},
			handleDelPlan() { // 删除我们的计划
				// 传入计划id 调用接口实现删除 计划
				uni.showModal({
					title: '提示',
					content: '是否确定删除计划',
					success: function(res) {
						if (res.confirm) {
							console.log('确定');
						}
					}
				})
			},
			onMaterTypeConfirm(data) { // 计划事项中的计划类型的确认方法
				this.arrowName = 'arrow-down'
				this.planList[this.currIndex].JHSLLX = data.value[0]
				this.showMaterType = false
			},
			handleMatterTypeClick(index) { // 计划事项中的计划类型点击方法
				this.arrowName = 'arrow-up'
				this.currIndex = index
				this.showMaterType = true
			},
			handleMaterTypeCancel() { // 计划事项中的计划类型的清除方法
				this.planList[this.currIndex].JHSLLX = ''
				this.arrowName = 'arrow-down'
				this.showMaterType = false
			},
			handleAddEstimatePlan() { // 添加预估计划
				const startTime = this.$common.dateFormat(this.headerInfo.Date, 'ymd-hms')
				uni.navigateTo({
					url: `/packagePlan/pages/addMyPlan/addMyPlan?planType=${this.headerInfo.JHLX}&startTime=${startTime}`
				})
			},
			handleSaveUpdate() { // 保存修改 默认就是放入草稿箱中
				this.handleSubmitValidate('保存修改', (params) => {
					//  发送请求执行 相关逻辑
				})
			},
			handleSubmit() { // 发布
				this.handleSubmitValidate('发布此条计划', (params) => {
					//  发送请求执行 相关逻辑
				})
			},
			handleAccomplish() { // 完成情况模态框
				this.showExplainPop = true
			},
			cancelExplain() {
				this.showExplainPop = false
			},
			onScuessConfirm(data) { // 完成时间确认方法
				console.log(this.planListLen);
				console.log(this.$common.dateFormat(data.value, 'ymd-hms'));
				this.planList[this.currIndex].CompletionTime = this.$common.dateFormat(data.value, 'ymd-hms')
				this.showScuessPicker = false
			},
			handleBack() { // 返回
				this.showClient = false
				this.showPersonnel = false
			},
			handleUpdateClient(data) { // 关联的数据回调
				this.planList[this.currIndex].GLKH = data.list
				this.handleBack()
			},
			handleCorrelationSure(data) {
				this.planList[this.currIndex].GLR = data
				this.handleBack()
			},
			handleEnterPublish() { // 确认发布的方法
				this.handleSubmitValidate('发布此条计划项', (params) => {
					//  发送请求执行 相关逻辑
				})
			},
			handleSendMsg() { // 发送消息
				if (this.commentMsg.length > 0) {
					console.log(this.commentMsg);
				}
			},
			handleSubmitValidate(modalText, callBack) { // 发布/确认发布/保存修改 等提交的校验
				const _this = this
				uni.showModal({
					title: '提示',
					content: `是否确定${modalText}`,
					success: function(res) {
						if (res.confirm) {
							// 默认就是放入草稿箱中
							// 进行遍历判断
							const submits = _this.planList.map((item, index) => {
								if (!item.JHFL) {
									uni.showToast({
										icon: 'none',
										title: `请输入计划事项`
									})
									return false
								} else if (item.JHXQ.some(JHXQItem => !JHXQItem)) {
									uni.showToast({
										icon: 'none',
										title: `请输入计划详情`
									})
									return false
								} else if (!item.JHSLLX) {
									uni.showToast({
										icon: 'none',
										title: `请输入计划类型`
									})
									return false
								} else if (!item.Sales) {
									uni.showToast({
										icon: 'none',
										title: `请输入计划数量`
									})
									return false
								} else {
									return true
								}
							})
							// 所有数组保证全部通过 才能进行提交
							if (submits.every(item => item === true)) {
								if (submits.length == 0) {
									uni.showToast({
										icon: 'none',
										title: `请至少添加一个事项`
									})
									return
								}

								if (_this.planType == 3) {
									const newPlanList = JSON.parse(JSON.stringify(_this.planList)).map(
										item => {
											Object.keys(item).forEach(key => {
												if (key == 'JHXQ') {
													item['JHXQ'] = item['JHXQ'].map(item => item
															.data)
														.join("|")
												}
											})
											return {
												JHFL: item.JHFL,
												Sales: item.Sales,
												JHXQ: item.JHXQ,
												JHZT: item.JHZT,
												QKSM: item.QKSM,
												OldJHID: item.OldJHID,
												JHSLLX: item.JHSLLX,
												XCBFSJ: item.XCBFSJ,
												ActualMount: item.ActualMount,
												RowID: item.RowID,
												RelationalSchemaID: item.RelationalSchemaID
											}
										})

									let params = {
										JHID: _this.headerInfo.JHID,
										JHXQ: newPlanList
									}
									console.log('newPlanList', newPlanList);
									this.params = {
										...params
									}
								} else {
									const newPlanList = JSON.parse(JSON.stringify(_this.planList)).slice(
										_this.oldLen).map(
										item => {
											Object.keys(item).forEach(key => {
												if (key == 'JHXQ') {
													item['JHXQ'] = item['JHXQ'].map(item => item
															.data)
														.join("|")
												}
											})
											return item
										})
									console.log(newPlanList);
								}
								callBack(_this.params)
								// 保存为草稿的api 然后获取保存草稿的planId 计划id 也需要传入到 addMyPlan中
								console.log(_this.params);
							}
						}
					}
				})
			}
		},
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
	}
</style>

<style lang="scss" scoped>
	.page {
		box-sizing: border-box;
		padding-bottom: 120rpx;

		/deep/ .u-input {
			border: none;
		}

		/deep/ .u-icon {
			justify-content: center;
		}

		.card {
			margin-top: 20rpx;
			background-color: #fff;
			border-radius: 8rpx;
			margin: 11px 30rpx;
		}

		.popup {
			height: 86vh;
		}

		.add-btn {
			display: flex;
			align-content: center;
			justify-content: center;
			box-sizing: border-box;
			margin: 0 20rpx;
			border: none;
			font-size: 26rpx;
			color: #157EFB;
			text-align: center;
			line-height: 40rpx;
			padding: 11px;
			font-weight: 600;
			background-color: #fff;

			&::after {
				border: none;
			}
		}

		.comment-card-list {
			margin: 8rpx 30rpx;
			padding: 14rpx 24rpx;
			background-color: #fff;

			.common-head {
				height: 80rpx;
				line-height: 80rpx;
				border-bottom: 1px solid #F1F1F5;
			}

			.comments {
				display: flex;
				flex-direction: column;
				padding: 22rpx;

				.comment-item {
					display: flex;
					margin-bottom: 12rpx;

					.right {
						flex: 1;
						margin-left: 4rpx;

						.detail {
							display: flex;
							justify-content: space-between;
							font-size: 26rpx;
							height: 24px;
							line-height: 24px;

							.time {
								color: #b6b9be;
							}
						}
					}

					.msg {
						background-color: #F1F1F5;
						padding: 14rpx 40rpx;
						line-height: 42rpx;
						font-size: 26rpx;
						color: #333;
						border-radius: 0 20rpx 20rpx 20rpx;
						margin-top: 14rpx;
					}
				}
			}
		}

		.comment-card {
			padding: 0 20px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 9999;
			width: 100%;
			height: 100rpx;
			background-color: #fff;
			font-size: 28rpx;
		}


		.footer-operation-btns {
			position: absolute;
			display: flex;
			align-items: center;
			width: 100%;
			height: 108rpx;
			display: flex;
			left: 0;
			bottom: 0;

			.next-btn,
			.scratch-paper-btn {
				flex: 1;
				line-height: 108rpx;
				height: 108rpx;
			}

			.next-btn {
				background-color: #2A8FFC;
				color: #fff;
			}

			.scratch-paper-btn {
				background-color: #fff;
				color: #2A8FFC;
			}
		}

		.header-card {
			margin: 8rpx 30rpx;
			padding: 34rpx 22rpx 6rpx;
			border-radius: 8rpx;
			background-color: #fff;

			.header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				// .lf {}

				.rg-tag {
					border-radius: 34rpx;
					padding: 10rpx 18rpx;
					color: #2A8FFC;
					border: 1px solid #2A8FFC;
				}
			}

			.info {
				display: flex;
				align-items: center;
				font-size: 26rpx;


				.name {
					margin: 12rpx;
				}

				.time {
					color: #b6b9be;
				}
			}

			.header-footer-btn {
				margin-top: 6rpx;
				width: 100%;
				border-top: 1px solid #f1f1f5;
				background-color: #fff;
				color: #157EFB;

				&::after {
					border: none !important;
				}
			}
		}

		.del-operation {
			position: fixed;
			right: 80rpx;
			bottom: 140rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 40px;
			height: 40px;
			border-radius: 50%;
			background-color: rgba(0, 0, 0, .3);
		}

		.card-list {
			.card {
				padding: 18rpx 16rpx;

				.header-times {
					height: 90rpx;
					line-height: 90rpx;
					font-size: 26rpx;
					border-bottom: 1px solid #F1F1F5;
				}

				.title {
					height: 60rpx;
					line-height: 60rpx;
				}

				.msg-detail-list {
					.msg-detail-item {
						display: flex;
						justify-content: space-between;
						margin-bottom: 10rpx;
						padding: 18rpx 24rpx;
						background-color: #f1f1f5;
						border-radius: 14rpx;
						min-height: 150rpx;

						.text-msg {
							flex: 1;
							margin-right: 4rpx;
							font-size: 28rpx;
							color: #6c6c6c;
						}

						.icon-card {
							display: flex;
							flex-direction: column;
							justify-content: center;
							color: #ff8a00;
						}
					}
				}

				.count {
					display: flex;
					align-items: center;
					background-color: #f1f1f5;
					border-radius: 8rpx;
					padding: 18rpx 24rpx;

					.label {
						color: #157EFB;
					}
				}

				.header {
					display: flex;
					align-items: center;
					justify-content: space-between;
					min-height: 40rpx;
					padding: 10rpx 0 16rpx;
					line-height: 34rpx;

					.del-box {
						padding: 8rpx;
						background-color: #F1F1F5;
						text-align: center;
						line-height: 30rpx;
						margin-left: 40rpx;
						border-radius: 50%;
					}
				}

				.content {
					.row {
						display: flex;
						flex-direction: column;

						.col {
							display: flex;
							width: 100%;
						}

						.footer {
							display: flex;
							width: 100%;
							align-items: center;
							line-height: 46rpx;
							font-size: 26rpx;
							color: #2A8FFC;
							text-align: center;
							margin-top: 20rpx;
							margin-bottom: 6rpx;

							.footer-item {
								flex: 1;
								font-weight: 600;
								text-align: center;
								border-right: 1px solid rgba(229, 229, 229, 0.5);
							}

							.footer-item:nth-last-child(1) {
								border: none;
							}
						}
					}

					.row,
					.rowTwo {
						margin-bottom: 10rpx;

						/deep/ .u-input {
							background-color: #F1F1F5;
							border-radius: 8rpx;
							padding: 10rpx 15rpx 10rpx 20rpx;
							box-sizing: border-box;
							margin: 0 5rpx;
							height: 80rpx;
							line-height: 80rpx;
						}

						/deep/ .u-textarea {
							background-color: #F1F1F5;
							border: none;
							border-radius: 8rpx;
							padding: 10rpx 15rpx 10rpx 20rpx;
							box-sizing: border-box;
							margin: 0 5rpx;
							min-height: 80rpx;
						}
					}

					.rowTwo {
						display: flex;
						align-items: center;
						margin-bottom: 10rpx;

						.select-type {
							display: flex;
							align-items: center;
							width: 240rpx;
							background: #F1F1F5;
							border-radius: 8rpx;
							padding: 0 20rpx;
							line-height: 80rpx;
							color: #999;
							margin-right: 10rpx;
						}
					}

					.add-icon,
					.sub-icon {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						background-color: #F1F1F5;
						margin-left: 10rpx;
					}
				}

				.footer {
					display: flex;
					align-items: center;
					line-height: 46rpx;
					font-size: 26rpx;
					color: #2A8FFC;
					text-align: center;
					margin-top: 20rpx;
					margin-bottom: 6rpx;

					.footer-item {
						flex: 1;
						font-weight: 600;
						text-align: center;
						border-right: 1px solid rgba(229, 229, 229, 0.5);
					}

					.footer-item:nth-last-child(1) {
						border: none;
					}
				}

				.footer-tip {
					display: flex;
					align-items: center;
					font-size: 24rpx;
				}

				.footer-publish {
					width: 100%;
					color: #157EFB;
					background-color: #fff;

					&::after {
						border: none !important;
					}
				}
			}
		}
	}
</style>